<template>
	<el-table :data="data" size="small" ref="tableref" :max-height="tableheight" :row-class-name="rowClassName"
		@cell-dblclick="oncelldblclick" border @selection-change="onSelectionchanges" @header-dragend="headerDragend"
		:highlight-current-row="highlightCurrentRow" @current-change="onSelectionchange" @row-click="rowClickFunc" sortable="custom"
		@sort-change="onsortchange" :default-sort="defaultSort">
		<el-table-column v-if="selection" type="selection" width="55" fixed="left" align="center" />
		<el-table-column label="序号" width="60" align="center" type="index" fixed="left">
			<template #header="{ row }">
				<el-tooltip class="box-item" effect="dark" content="点击可显示/隐藏字段" placement="top">
					<el-icon>
						<Setting style="cursor: pointer;" @click="handleAdds" />
					</el-icon>
				</el-tooltip>
			</template>
		</el-table-column>
		<template v-for="(item,index) in list" :key="index">
			<slot name="tool" :item="item"></slot>
		</template>
		<el-table-column v-if="operation" label="操作" :width="toolwidth" fixed="right" align="center">
			<template #default="{ row }">
				<slot v-if="bill" name="operation" :val="row" :row="row.permissions?.notice||row.scrap_permissions?.notice"></slot>
				<!-- <slot v-if="bill" name="operation" :val="row" :row="row.permissions.notice"></slot> -->
				<slot v-else name="operation" :row="row"></slot>
			</template>
		</el-table-column>
	</el-table>
</template>

<script lang="ts" setup>
	import useAppStore from '@/stores/modules/inventory'
	import {
		setCommonFieldDisplay
	} from '@/api/tools/code'
	const tableref = shallowRef < FormInstance > ()
	const emit = defineEmits([
		'oncelldblclick',
		'handleAdds',
		'onSelectionchange',
		'onSelectionchanges',
		'rowClickFunc',
		'onclearSort',
		'onsortchange'
	])
	const props = defineProps({
		data: {
			type: [String, Array],
			default: () => []
		},
		toolwidth: {
			type: String,
			default: '80'
		},
		tableheight: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		list: {
			type: [String, Array],
			default: () => []
		},
		// 是否显示 操作
		operation: {
			type: Boolean,
			default: false
		},
		//是否显示 点击背景颜色
		highlightCurrentRow: {
			type: Boolean,
			default: true
		},
		// 是否显示 机械设备单位
		bill: {
			type: Boolean,
			default: false
		},
		// 是否显示 多选框
		selection: {
			type: Boolean,
			default: false
		},
		rowtype: {
			type: String,
			default: ''
		},
		indexmao: {
			type: String,
			default: ''
		},
		defaultSort: {
			type: String,
			default: ''
		},
	})

	const userStore = useAppStore()
	const rowClassName = ({
		row,
		rowIndex
	}) => {
		row.index = rowIndex
		if (props.rowtype) {
			if (rowIndex == props.indexmao) {
				return 'warning-row'
			}
		}
		if(row.typeShow){
			return 'show-row'
		}
	}
	watch(() => props.indexmao, (newValue) => {
		setTimeout(function() {
		
		}, 300)
	}, {
		deep: true
	})
	const oncelldblclick = (row: any) => {
		emit('oncelldblclick', row)
	}
	const handleAdds = () => {
		emit('handleAdds')
	}
	const rowClickFunc = (row: any) => {
		emit('rowClickFunc', row, tableref.value)
		// tableref.value.clearSort()
	}
	const onSelectionchanges = (val: any) => {
		emit('onSelectionchanges', val)
	}
	const onSelectionchange = (val: any) => {
		emit('onSelectionchange', val)
	}
	const onsetCommonFieldDisplay = (val: any) => {
		setCommonFieldDisplay({
			[props.type]: JSON.stringify(val)
		}).then(() => {})
	}

	const onsortchange = async (column: any) => {
		emit('onsortchange', column)
	}
	const headerDragend = (newWidth: any, oldWidth: any, column: any, event: any) => {
		let newTableHeader = props.list.map((item, index) => {
			if (item.name == column.label) {
				item.width = newWidth
			}
			return item
		})
		onsetCommonFieldDisplay(newTableHeader)
	}
</script>

<style>
	.el-table .warning-row {
		background: transparent;
	}

	.el-table .success-row {
		background: transparent;
	}
	.el-table .show-row{
		background-color: transparent;
	}
</style>
